import React, { Component } from "react";
import { connect } from "dva";
import {
  Button,
  Input,
  Table,
  Divider,
  Popconfirm,
  Badge,
  Tooltip
} from "antd";
import styles from "./PushList.less";
import PushModal from "./PushModal";

const { Search } = Input;

class PushList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentData: {},
      modalType: "add" // edit是修改弹出框
    };
  }

  columns = [
    {
      title: "序号",
      dataIndex: "pushPlanId",
      key: "pushPlanId",
      width: "70px",
      // TODO:切页的时候序号渲染太快
      render: (text, recode, index) => {
        const { filter } = this.props.pushList;
        const currenPage = Number(filter.pageIndex);
        const PageSize = Number(filter.pageSize);
        const xuhao = Number(index) + 1 + (currenPage - 1) * PageSize;
        return xuhao;
      }
    },
    {
      title: "推送名称",
      dataIndex: "pushPlanName",
      key: "pushPlanName",
      width: "16%",
      render: text =>
        text.length > 15 ? (
          <Tooltip placement="top" title={text} arrowPointAtCenter>
            <span>{`${text.substring(0, 15)}……`}</span>
          </Tooltip>
        ) : (
          text
        )
    },
    {
      title: "业务系统",
      dataIndex: "appName",
      key: "appName",
      width: "10%"
    },
    {
      title: "推送描述",
      dataIndex: "pushDesc",
      key: "pushDesc",
      render: text =>
        text.length > 15 ? (
          <Tooltip placement="top" title={text} arrowPointAtCenter>
            <span>{`${text.substring(0, 15)}……`}</span>
          </Tooltip>
        ) : (
          text
        )
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
      sorter: true,
      width: "160px"
    },
    {
      title: "创建人",
      dataIndex: "creatorName",
      key: "creatorName",
      width: "10%"
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      width: "90px",
      render: text => {
        let val = "";
        let code = text;
        if (code === "已启用") {
          val = "已启用";
          code = "success";
        } else {
          val = "已停用";
          code = "error";
        }
        return <Badge status={code} text={val} />;
      },
      filters: [
        {
          text: "已启用",
          value: "1"
        },
        {
          text: "已停用",
          value: "0"
        }
      ],
      filterMultiple: false
    },
    {
      title: "操作",
      dataIndex: "setId",
      key: "setId",
      width: "150px",
      render: (txt, record) => (
        <React.Fragment>
          <a
            onClick={() => {
              this.isForbidden(record);
            }}
          >
            {record.status === "已启用" ? "停用" : "启用"}
          </a>
          <Divider type="vertical" />
          <a
            onClick={() => {
              this.showModalFn(record, "edit");
            }}
          >
            编辑
          </a>
          <Divider type="vertical" />
          <Popconfirm
            placement="top"
            title={"确认要删除？"}
            onConfirm={() => {
              this.delete(record);
            }}
            okText="确定"
            cancelText="取消"
          >
            <a role="button">删除</a>
          </Popconfirm>
        </React.Fragment>
      )
    }
  ];

  componentDidMount() {
    this.refresh();
  }

  // 初始化页面
  refresh = () => {
    this.props.dispatch({
      type: "pushList/pushConfQuery",
      payload: {
        pushPlanName: null,
        pageIndex: 1,
        pageSize: 10,
        pushDesc: null,
        createTime: null,
        status: null,
        order: null // "asc"升序  desc:降序
      }
    });
  };

  // 禁止，启用状态
  isForbidden = (record = {}) => {
    const { pushPlanId, status } = record;
    this.props.dispatch({
      type: "pushList/pushConfStatusMod",
      payload: {
        pushPlanId,
        status: status === "已启用" ? "0" : "1"
      }
    });
  };

  delete = (record = {}) => {
    const pushConfId = String(record.pushPlanId);
    this.props.dispatch({
      type: "pushList/pushConfDel",
      payload: { pushConfId }
    });
    // TODO：再次请求刷新数据
  };

  showModalFn(record, type) {
    this.setState({
      currentData: record,
      modalType: type
    });
    this.props.dispatch({ type: "pushList/showModal" });
  }

  closeModal() {
    this.props.dispatch({
      type: "pushList/trigger/showModal",
      payload: false
    });
  }

  // 表格变化(涵盖分页器变化)
  handleTableChange = (pagination = {}, filters = {}, sorter = {}) => {
    let order = null; // 有效期升降序
    let status = null; // 状态筛选
    const pageIndex = pagination.current; // 分页器页码变化
    const { pageSize } = pagination; // 分页器每页显示页数变化
    if (sorter.order) {
      if (sorter.order === "descend") {
        order = "desc";
      } else {
        order = "asc";
      }
    }
    if (filters.status) {
      if (filters.status.indexOf("1") > -1) {
        status = "1";
      } else if (filters.status.indexOf("0") > -1) {
        status = "0";
      }
    }
    this.props.dispatch({
      type: "pushList/pushConfQuery",
      payload: { order, status, pageIndex, pageSize }
    });
  };

  render() {
    const { pushList = {}, dispatch } = this.props;
    const {
      list,
      totalCount,
      filter = {},
      totalPage,
      showModal,
      DropDownList
    } = pushList;
    const { currentData, modalType } = this.state;
    return (
      <div className={styles.root}>
        <div className={styles.setDiv}>
          <span className={styles.title}>推送列表</span>
          <div className={styles.set}>
            <Button
              type="primary"
              onClick={() => {
                this.showModalFn({}, "add");
              }}
            >
              新增推送
            </Button>
            <Search
              placeholder="搜索"
              onSearch={value => {
                this.props.dispatch({
                  type: "pushList/pushConfQuery",
                  payload: {
                    pushPlanName: value === "" ? null : value,
                    pageIndex: 1
                  }
                });
              }}
              style={{ width: 272, marginLeft: 15 }}
            />
          </div>
        </div>
        <Table
          columns={this.columns}
          dataSource={list}
          rowKey={(item = {}) => item.pushPlanId}
          // size="middle"
          onChange={this.handleTableChange}
          pagination={{
            total: totalCount,
            pageSize: filter.pageSize,
            current: filter.pageIndex,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: total =>
              `共 ${total} 条记录 第 ${filter.pageIndex}/ ${totalPage}页`
          }}
        />
        {showModal && (
          <PushModal
            dispatch={dispatch}
            showModal={showModal}
            dataSource={currentData}
            modalType={modalType}
            closeModal={this.closeModal.bind(this)}
            DropDownList={DropDownList}
          />
        )}
      </div>
    );
  }
}

export default connect(stores => ({
  pushList: stores.pushList
}))(PushList);
